<!-- 页面头部 -->
<template>
  <div class="header">
    <el-avatar size="small" :src="userInfo.avatar"></el-avatar>
    <el-dropdown placement="bottom">
      <span class="el-dropdown-link">
        {{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :underline="false">
          <router-link :to="{ name: 'UserCenter' }">个人中心</router-link>
        </el-dropdown-item>
        <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 相关链接 -->
    <el-dropdown placement="bottom">
      <span class="el-dropdown-link">
        相关链接
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :underline="false">
          <el-link :underline="false" href="https://www.bilibili.com"
            >bilibili首页</el-link
          >
        </el-dropdown-item>
        <el-dropdown-item :underline="false">
          <el-link
            :underline="false"
            href="https://gitee.com/kaguyahime/projects"
            >我的gitee</el-link
          >
        </el-dropdown-item>
        <el-dropdown-item :underline="false">
          <el-link :underline="false" href="https://cn.vuejs.org/"
            >Vue官网</el-link
          >
        </el-dropdown-item>
        <el-dropdown-item :underline="false">
          <el-link :underline="false" href="https://element.eleme.cn/"
            >element-ui官网</el-link
          >
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <a class="link" href="#">关于</a>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import userApi from '@/api/user.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      userInfo: {
        id: "",
        username: "",
        avatar: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取用户信息并绑定data做页面展示
    getUserInfo() {
      userApi.getUserInfo().then((res) => {
        this.userInfo = res.data.data;
        //用户信息存入全局store中
        this.$store.commit("setUserInfo",res.data.data);
        console.log(res.data.data)
      });
    },
    //退出登录
    logout() {
      //用户登出
      this.$axios.post("/logout").then((res) => {
        //打印信息
        //console.log(res.data.data);
        //清除localStorage内容
        localStorage.clear();
        //清除session
        sessionStorage.clear();
        //清除全局状态存入的信息
        this.$store.commit("resetState");
        this.$store.commit("resetUserInfo");
        //跳转到登录
        this.$router.push("/login");
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //获取用户信息并绑定data做页面展示
    this.getUserInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  //3.0版本弃用 beforeDestroy() {}, //生命周期 - 销毁之前
  //3.0版本弃用 destroyed() {}, //生命周期 - 销毁完成
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.header {
  float: right;
  width: 260px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* color: #eaecec; */
  margin-right: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #eaecec;
}
a {
  color: #606266;
}
.link {
  color: #eaecec;
}

.el-dropdown-menu {
  width: 200px;
}
</style>